[[ define "history/index.html" ]]
<!-- 如果多级目录中的文件名相同时，需要在html文件中声明一下别名，供后端发送html()时使用，避免加载模板文件被替换掉-->

[[template "head" .]] <!-- 调用定义的公共头部模板文件 -->


<!-- 页面标题区域 -->
<section class="py-12 bg-gradient-to-r from-primary/10 to-secondary/10">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto">
            <h1 class="text-4xl md:text-5xl font-bold text-base-content mb-6">发展历程</h1>
            <p class="text-xl text-base-content/70">见证成长每一步，共创辉煌未来</p>
        </div>
    </div>
</section>

<!-- 发展历程时间线 -->
<section class="py-16 bg-base-100">
    <div class="container mx-auto px-4">
        <!-- 时间线容器 -->
        <div class="relative max-w-6xl mx-auto">
            <!-- 中央时间线 -->
            <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary via-secondary to-accent hidden md:block"></div>
            
            <!-- 时间线项目 -->
            <div class="space-y-16 md:space-y-24">
                <!-- 2025年 -->
                <div class="relative flex flex-col md:flex-row items-center">
                    <!-- 左侧内容 -->
                    <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0 order-1">
                        <div class="inline-block">
                            <div class="bg-primary/10 rounded-2xl p-6 shadow-lg">
                                <div class="flex items-center justify-end mb-3">
                                    <span class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-primary text-primary-content text-sm font-semibold mr-2">里程碑</span>
                                    <span class="text-2xl font-bold text-primary">2025</span>
                                </div>
                                <h3 class="text-2xl font-bold text-base-content mb-3">全面智能化升级</h3>
                                <ul class="text-base-content/70 space-y-2 text-right">
                                    <li>• 推出AI智能决策系统</li>
                                    <li>• 服务客户突破5000家</li>
                                    <li>• 获得国家级高新技术企业认证</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 时间节点 -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 md:relative md:left-0 md:transform-none z-10 order-2">
                        <div class="w-6 h-6 rounded-full bg-primary border-4 border-base-100 shadow-lg"></div>
                    </div>
                    
                    <!-- 右侧占位 -->
                    <div class="md:w-1/2 md:pl-12 order-3"></div>
                </div>

                <!-- 2024年 -->
                <div class="relative flex flex-col md:flex-row items-center">
                    <!-- 左侧占位 -->
                    <div class="md:w-1/2 md:pr-12 order-1"></div>
                    
                    <!-- 时间节点 -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 md:relative md:left-0 md:transform-none z-10 order-2">
                        <div class="w-6 h-6 rounded-full bg-secondary border-4 border-base-100 shadow-lg"></div>
                    </div>
                    
                    <!-- 右侧内容 -->
                    <div class="md:w-1/2 md:pl-12 mt-6 md:mt-0 order-3">
                        <div class="inline-block">
                            <div class="bg-secondary/10 rounded-2xl p-6 shadow-lg">
                                <div class="flex items-center mb-3">
                                    <span class="text-2xl font-bold text-secondary">2024</span>
                                    <span class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-secondary text-secondary-content text-sm font-semibold ml-2">突破</span>
                                </div>
                                <h3 class="text-2xl font-bold text-base-content mb-3">市场扩张与技术突破</h3>
                                <ul class="text-base-content/70 space-y-2">
                                    <li>• 成立华南研发中心</li>
                                    <li>• 推出云端协同平台</li>
                                    <li>• 获得多项技术专利</li>
                                    <li>• 海外市场取得突破</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2023年 -->
                <div class="relative flex flex-col md:flex-row items-center">
                    <!-- 左侧内容 -->
                    <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0 order-1">
                        <div class="inline-block">
                            <div class="bg-accent/10 rounded-2xl p-6 shadow-lg">
                                <div class="flex items-center justify-end mb-3">
                                    <span class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-accent text-accent-content text-sm font-semibold mr-2">创新</span>
                                    <span class="text-2xl font-bold text-accent">2023</span>
                                </div>
                                <h3 class="text-2xl font-bold text-base-content mb-3">产品矩阵完善</h3>
                                <ul class="text-base-content/70 space-y-2 text-right">
                                    <li>• 发布移动端应用套件</li>
                                    <li>• 建立合作伙伴生态系统</li>
                                    <li>• 获得行业创新大奖</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 时间节点 -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 md:relative md:left-0 md:transform-none z-10 order-2">
                        <div class="w-6 h-6 rounded-full bg-accent border-4 border-base-100 shadow-lg"></div>
                    </div>
                    
                    <!-- 右侧占位 -->
                    <div class="md:w-1/2 md:pl-12 order-3"></div>
                </div>

                <!-- 2022年 -->
                <div class="relative flex flex-col md:flex-row items-center">
                    <!-- 左侧占位 -->
                    <div class="md:w-1/2 md:pr-12 order-1"></div>
                    
                    <!-- 时间节点 -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 md:relative md:left-0 md:transform-none z-10 order-2">
                        <div class="w-6 h-6 rounded-full bg-neutral border-4 border-base-100 shadow-lg"></div>
                    </div>
                    
                    <!-- 右侧内容 -->
                    <div class="md:w-1/2 md:pl-12 mt-6 md:mt-0 order-3">
                        <div class="inline-block">
                            <div class="bg-neutral/10 rounded-2xl p-6 shadow-lg">
                                <div class="flex items-center mb-3">
                                    <span class="text-2xl font-bold text-neutral">2022</span>
                                    <span class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-neutral text-neutral-content text-sm font-semibold ml-2">成长</span>
                                </div>
                                <h3 class="text-2xl font-bold text-base-content mb-3">业务快速增长</h3>
                                <ul class="text-base-content/70 space-y-2">
                                    <li>• 团队规模突破100人</li>
                                    <li>• 完成A轮融资</li>
                                    <li>• 服务客户超过1000家</li>
                                    <li>• 建立全国服务体系</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2021年 -->
                <div class="relative flex flex-col md:flex-row items-center">
                    <!-- 左侧内容 -->
                    <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0 order-1">
                        <div class="inline-block">
                            <div class="bg-primary/10 rounded-2xl p-6 shadow-lg">
                                <div class="flex items-center justify-end mb-3">
                                    <span class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-primary text-primary-content text-sm font-semibold mr-2">奠基</span>
                                    <span class="text-2xl font-bold text-primary">2021</span>
                                </div>
                                <h3 class="text-2xl font-bold text-base-content mb-3">核心产品发布</h3>
                                <ul class="text-base-content/70 space-y-2 text-right">
                                    <li>• 发布企业级软件平台</li>
                                    <li>• 获得软件著作权认证</li>
                                    <li>• 建立技术研发中心</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 时间节点 -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 md:relative md:left-0 md:transform-none z-10 order-2">
                        <div class="w-6 h-6 rounded-full bg-primary border-4 border-base-100 shadow-lg"></div>
                    </div>
                    
                    <!-- 右侧占位 -->
                    <div class="md:w-1/2 md:pl-12 order-3"></div>
                </div>

                <!-- 2020年 -->
                <div class="relative flex flex-col md:flex-row items-center">
                    <!-- 左侧占位 -->
                    <div class="md:w-1/2 md:pr-12 order-1"></div>
                    
                    <!-- 时间节点 -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 md:relative md:left-0 md:transform-none z-10 order-2">
                        <div class="w-6 h-6 rounded-full bg-secondary border-4 border-base-100 shadow-lg"></div>
                    </div>
                    
                    <!-- 右侧内容 -->
                    <div class="md:w-1/2 md:pl-12 mt-6 md:mt-0 order-3">
                        <div class="inline-block">
                            <div class="bg-secondary/10 rounded-2xl p-6 shadow-lg">
                                <div class="flex items-center mb-3">
                                    <span class="text-2xl font-bold text-secondary">2020</span>
                                    <span class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-secondary text-secondary-content text-sm font-semibold ml-2">初创</span>
                                </div>
                                <h3 class="text-2xl font-bold text-base-content mb-3">公司正式成立</h3>
                                <ul class="text-base-content/70 space-y-2">
                                    <li>• [[ .网站名称 ]] 正式注册成立</li>
                                    <li>• 组建核心创始团队</li>
                                    <li>• 确定技术发展方向</li>
                                    <li>• 获得天使轮投资</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 起点标记 -->
            <div class="absolute left-1/2 transform -translate-x-1/2 -bottom-6 hidden md:block">
                <div class="text-center">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary mx-auto mb-2 flex items-center justify-center">
                        <i class="fa fa-flag text-white text-sm"></i>
                    </div>
                    <p class="text-sm text-base-content/70">启程</p>
                </div>
            </div>
        </div>

        <!-- 统计数据 -->
        <div class="mt-20 mb-12">
            <div class="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl p-8 md:p-12">
                <h2 class="text-3xl font-bold text-base-content mb-8 text-center">发展成就</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="text-center p-6">
                        <div class="text-4xl md:text-5xl font-bold text-primary mb-2">6年</div>
                        <p class="text-base-content/70">发展历程</p>
                    </div>
                    <div class="text-center p-6">
                        <div class="text-4xl md:text-5xl font-bold text-secondary mb-2">200+</div>
                        <p class="text-base-content/70">精英团队</p>
                    </div>
                    <div class="text-center p-6">
                        <div class="text-4xl md:text-5xl font-bold text-accent mb-2">5000+</div>
                        <p class="text-base-content/70">服务客户</p>
                    </div>
                    <div class="text-center p-6">
                        <div class="text-4xl md:text-5xl font-bold text-neutral mb-2">50+</div>
                        <p class="text-base-content/70">技术专利</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 未来展望 -->
        <div class="text-center max-w-3xl mx-auto">
            <h2 class="text-3xl font-bold text-base-content mb-6">展望未来</h2>
            <p class="text-xl text-base-content/70 mb-8">
                过去的成就只是起点，未来我们将继续秉承创新精神，以更优质的产品和服务，与客户共同成长，创造更加辉煌的明天。
            </p>

        </div>
    </div>
</section>

<style>
/* 时间线动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.relative > div > div:not(.absolute) {
    animation: fadeInUp 0.6s ease-out;
}
.relative:nth-child(odd) > div > div:not(.absolute) {
    animation-delay: 0.1s;
}
.relative:nth-child(even) > div > div:not(.absolute) {
    animation-delay: 0.2s;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .relative > .md\:w-1\/2 {
        width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        text-align: left !important;
    }
    .relative > .md\:w-1\/2 ul {
        text-align: left !important;
    }
    .relative > .md\:w-1\/2 .flex.justify-end {
        justify-content: flex-start !important;
    }
}
</style>


[[template "foot" .]] <!-- 调用定义的公共底部模板文件 -->

[[end]]